<template>
	<view v-show="i === index">
		<mescroll-uni v-if="i" :ref="'mescrollRef'+i" :top="95+statusBarHeight" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
            <view class="category-list u-m-20">
                <view class="category-item u-m-b-20" v-for="(cat, catIndex) in tabs[i].children" v-if="catIndex < 10" :key="catIndex" @click="handleCategoty(cat)">
                    <u-image :src="cat.image" width="120" height="120"></u-image>
                    <view class="cat-title u-text-center u-m-10 u-line-1">{{ cat.name }}</view>
                </view>
            </view>
            <view class="goods-list-view" >
                <view class="goods-list u-flex" v-for="(goods, goodsIndex) in goodsList" :class="[(goodsIndex + 1) % 2 == 0 ? 'list-b' : '', 'goods-list' ]"  :key="goodsIndex">
					<navigator :url="'/goods-module/goods?goods_id='+goods.goods_id" hover-class="none">
						<goods-cell-search
							:doublerowShow="true"
							:goodsName="goods.name"
							:goodsImg="goods.thumbnail"
							:goodsPrice="goods.price"
							:goodsBuyCount="-1"
							:goodsCommentNum="-1"
                            :selfOperated="goods.self_operated"
						></goods-cell-search>
					</navigator>
                </view>
            </view>
		</mescroll-uni>
	</view>
</template>

<script>
    import * as API_Goods from '@/api/goods.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js"

	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		props:{
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default(){
					return 0
				}
			},
			tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
				type: Array,
				default(){
					return []
				}
			},
            statusBarHeight: {
                type: Number,
                default(){
                	return 0
                }
            }
		},
		data() {
			return {
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:false, // 不自动加载
					empty:{
						tip: '~ 空空如也 ~' // 提示
					}
				},
                goodsList: [] //商品列表
			}
		},
		methods: {
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// this.i: 每个tab页的专属下标
				// this.index: 当前tab的下标
                const params = {
                    page_no: page.num,
                    page_size: page.size,
                    category: this.tabs[this.i].category_id
                }
                API_Goods.getGoodsList(params).then(response => {
                    const { data } = response.goods_data
                    this.mescroll.endSuccess(data.length);
                    if(page.num == 1) this.goodsList = []; //如果是第一页需手动制空列表
                    this.goodsList = this.goodsList.concat(data); //追加新数据
                }).catch(() => {
                    this.mescroll.endErr();
                })
			},
            //分类搜索跳转
            handleCategoty(cat) {
                uni.navigateTo({
                    url: `/goods-module/goods-list?category=${cat.category_id}&catId=${cat.parent_id}`
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
.category-list {
    background-color: #FFFFFF;
    border-radius: 20rpx;
    padding: 20rpx 10rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    .category-item {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 20%;
        .cat-title {
            width: 120rpx;
        }
    }
}
.goods-list-view {
    margin: 10rpx 20rpx 0 20rpx;
    border-radius: 15rpx 15rpx 0rpx 0rpx;
    .goods-list {
        width: 48%;
        float: left;
        background: #FFFFFF;
        overflow: hidden;
        margin: 10rpx 0;
        border-radius: 20rpx;
        &.list-b {
            margin-left: 24rpx;
        }
    }
}
</style>
